import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import { APP_BLUE } from '../../../../constant/color';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  list: {
    paddingTop: phonePx(42),
    alignItems: 'center',
    backgroundColor: '#FFF'
  },
  item: {
    width: phonePx(320),
    minHeight: phonePx(130),
    borderRadius: phonePx(4),
    backgroundColor: '#FFFFFF',
    marginVertical: phonePx(10),
    borderWidth: phonePx(1),
    borderColor: '#F1F1F1',
    paddingLeft: phonePx(18),
    paddingTop: phonePx(22),
    paddingBottom: phonePx(22),
    paddingRight: phonePx(15)
  },
  end: {
    backgroundColor: '#F5F5F5'
  },
  unStart: {
    backgroundColor: '#FFFADD'
  },
  courseName: {
    color: '#4B505A',
    fontSize: phonePx(16),
    lineHeight: phonePx(22),
    fontWeight: '500'
  },
  video: {
    width: phonePx(21),
    height: phonePx(21),
    marginRight: phonePx(20)
  },
  vodDesc: {
    fontSize: phonePx(12),
    color: APP_BLUE,
    fontWeight: '500',
    marginRight: phonePx(20)
  },
  info: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: phonePx(30)
  },
  icon: {
    width: phonePx(34),
    height: phonePx(34),
    borderRadius: phonePx(17),
    backgroundColor: '#FFF7DA'
  },
  timeContent: {
    marginLeft: phonePx(12),
    justifyContent: 'space-between',
    height: phonePx(34)
  },
  time: {
    fontSize: phonePx(12),
    color: '#8F95A2',
    fontWeight: '500'
  },
  left: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  action: {
    width: phonePx(88),
    height: phonePx(34),
    borderRadius: phonePx(17),
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: phonePx(1),
    borderColor: '#FDD753',
    backgroundColor: '#ffffff'
  },
  actionDesc: {
    color: '#F7A821',
    fontSize: phonePx(14),
    fontWeight: '500'
  },
  startAction: {
    backgroundColor: '#FDD753',
    borderWidth: 0
  },
  startActionDesc: {
    color: '#4B505A'
  },
  unStartAction: {
    backgroundColor: '#F3F1ED',
    borderWidth: 0
  },
  unStartActionDesc: {
    color: '#A2A7AD'
  }
});
